<html>
<head>
<title>Index.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #aa7dfc;}
.s3 { color: #e2da90;}
.s4 { color: #db7e9b;}
.s5 { color: #bbb529;}
.s6 { color: #808080;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
Index.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{</span><span class="s0">router</span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.ArkUI'</span><span class="s3">;</span>
<span class="s0">import </span><span class="s1">{</span><span class="s0">BusinessError</span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.BasicServicesKit'</span><span class="s3">;</span>
<span class="s0">import </span><span class="s1">{ </span><span class="s0">resourceManager </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.LocalizationKit'</span><span class="s3">;</span>

<span class="s0">class BannerClass</span><span class="s1">{</span>
  <span class="s0">id</span><span class="s3">: </span><span class="s0">string</span><span class="s3">=</span><span class="s2">''</span><span class="s3">;</span>
  <span class="s0">imageSrc</span><span class="s3">: </span><span class="s0">ResourceStr</span><span class="s3">=</span><span class="s2">''</span><span class="s3">;</span>
  <span class="s0">url</span><span class="s3">:</span><span class="s0">string</span><span class="s3">=</span><span class="s2">''</span><span class="s3">;</span>

  <span class="s0">constructor</span><span class="s4">(</span><span class="s0">id</span><span class="s3">:</span><span class="s0">string</span><span class="s3">,</span><span class="s0">imageSrc</span><span class="s3">:</span><span class="s0">ResourceStr</span><span class="s3">,</span><span class="s0">url</span><span class="s3">:</span><span class="s0">string</span><span class="s4">) </span><span class="s1">{</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">id</span><span class="s3">=</span><span class="s0">id</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">imageSrc</span><span class="s3">=</span><span class="s0">imageSrc</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">url</span><span class="s3">=</span><span class="s0">url</span><span class="s3">;</span>
  <span class="s1">}</span>
<span class="s1">}</span>

<span class="s0">class ArticleClass </span><span class="s1">{</span>
  <span class="s0">id</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">''</span><span class="s3">;</span>
  <span class="s0">imageSrc</span><span class="s3">: </span><span class="s0">ResourceStr </span><span class="s3">= </span><span class="s2">''</span><span class="s3">;</span>
  <span class="s0">title</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">''</span><span class="s3">;</span>
  <span class="s0">brief</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">''</span><span class="s3">;</span>
  <span class="s0">webUrl</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">''</span><span class="s3">;</span>

  <span class="s0">constructor</span><span class="s4">(</span><span class="s0">id</span><span class="s3">: </span><span class="s0">string</span><span class="s3">, </span><span class="s0">imageSrc</span><span class="s3">: </span><span class="s0">ResourceStr</span><span class="s3">, </span><span class="s0">title</span><span class="s3">: </span><span class="s0">string</span><span class="s3">, </span><span class="s0">brief</span><span class="s3">: </span><span class="s0">string</span><span class="s3">, </span><span class="s0">webUrl</span><span class="s3">: </span><span class="s0">string</span><span class="s4">) </span><span class="s1">{</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">id </span><span class="s3">= </span><span class="s0">id</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">imageSrc </span><span class="s3">= </span><span class="s0">imageSrc</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">title </span><span class="s3">= </span><span class="s0">title</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">brief </span><span class="s3">= </span><span class="s0">brief</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">webUrl </span><span class="s3">= </span><span class="s0">webUrl</span><span class="s3">;</span>
  <span class="s1">}</span>
<span class="s1">}</span>

<span class="s5">@</span><span class="s0">Entry</span>
<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct Index </span><span class="s1">{</span>
  <span class="s5">@</span><span class="s0">State message</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">'快速入门'</span><span class="s3">;</span>

<span class="s6">//   build() {</span>
<span class="s6">//     RelativeContainer() {</span>
<span class="s6">//       Text(this.message)</span>
<span class="s6">//         .id('HelloWorld')</span>
<span class="s6">//         .fontSize($r('app.float.page_text_font_size'))</span>
<span class="s6">//         .fontWeight(FontWeight.Bold)</span>
<span class="s6">//         .alignRules({</span>
<span class="s6">//           center: { anchor: '__container__', align: VerticalAlign.Center },</span>
<span class="s6">//           middle: { anchor: '__container__', align: HorizontalAlign.Center }</span>
<span class="s6">//         })</span>
<span class="s6">//         .onClick(() =&gt; {</span>
<span class="s6">//           this.message = 'Welcome';</span>
<span class="s6">//         })</span>
<span class="s6">//     }</span>
<span class="s6">//     .height('100%')</span>
<span class="s6">//     .width('100%')</span>
<span class="s6">//   }</span>
<span class="s6">// }</span>

  <span class="s6">// Index.ets</span>

<span class="s6">//   build() {</span>
<span class="s6">//     Row() {</span>
<span class="s6">//       Column() {</span>
<span class="s6">//         Text(this.message)</span>
<span class="s6">//           .fontSize(50)</span>
<span class="s6">//           .fontWeight(FontWeight.Bold)</span>
<span class="s6">//         // 添加按钮，以响应用户点击</span>
<span class="s6">//         Button() {</span>
<span class="s6">//           Text('Next')</span>
<span class="s6">//             .fontSize(30)</span>
<span class="s6">//             .fontWeight(FontWeight.Bold)</span>
<span class="s6">//         }</span>
<span class="s6">//         .type(ButtonType.Capsule)</span>
<span class="s6">//         .margin({</span>
<span class="s6">//           top: 20</span>
<span class="s6">//         })</span>
<span class="s6">//         .backgroundColor('#0D9FFB')</span>
<span class="s6">//         .width('40%')</span>
<span class="s6">//         .height('5%')</span>
<span class="s6">//       }</span>
<span class="s6">//       .width('100%')</span>
<span class="s6">//     }</span>
<span class="s6">//     .height('100%')</span>
<span class="s6">//   }</span>
<span class="s6">// }</span>

  <span class="s6">// Index.ets</span>
  <span class="s6">// 导入页面路由模块</span>

  <span class="s6">// build() {</span>
  <span class="s6">//   Row() {</span>
  <span class="s6">//     Column() {</span>
  <span class="s6">//       Text(this.message)</span>
  <span class="s6">//         .fontSize(50)</span>
  <span class="s6">//         .fontWeight(FontWeight.Bold)</span>
  <span class="s6">//       // 添加按钮，以响应用户点击</span>
  <span class="s6">//       Button() {</span>
  <span class="s6">//         Text('Next')</span>
  <span class="s6">//           .fontSize(30)</span>
  <span class="s6">//           .fontSize(30)</span>
  <span class="s6">//           .fontWeight(FontWeight.Bold)</span>
  <span class="s6">//       }</span>
  <span class="s6">//       .type(ButtonType.Capsule)</span>
  <span class="s6">//       .margin({</span>
  <span class="s6">//         top: 20</span>
  <span class="s6">//       })</span>
  <span class="s6">//       .backgroundColor('#0D9FFB')</span>
  <span class="s6">//       .width('40%')</span>
  <span class="s6">//       .height('5%')</span>
  <span class="s6">//       // 跳转按钮绑定onClick事件，点击时跳转到第二页</span>
  <span class="s6">//       .onClick(() =&gt; {</span>
  <span class="s6">//         console.info(`Succeeded in clicking the 'Next' button.`)</span>
  <span class="s6">//         // 跳转到第二页</span>
  <span class="s6">//         router.pushUrl({ url: 'pages/Second' }).then(() =&gt; {</span>
  <span class="s6">//           console.info('Succeeded in jumping to the second page.')</span>
  <span class="s6">//</span>
  <span class="s6">//</span>
  <span class="s6">//         }).catch((err: BusinessError) =&gt; {</span>
  <span class="s6">//           console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)</span>
  <span class="s6">//         })</span>
  <span class="s6">//       })</span>
  <span class="s6">//     }</span>
  <span class="s6">//</span>
  <span class="s6">//</span>
  <span class="s6">//     .width('100%')</span>
  <span class="s6">//   }</span>
  <span class="s6">//   .height('100%')</span>
<span class="s6">//   }</span>
<span class="s6">// }</span>
  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s4">()</span><span class="s1">{</span>
      <span class="s0">Text</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">message</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">24</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">700</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{</span><span class="s0">left</span><span class="s3">:</span><span class="s7">16</span><span class="s1">}</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontFamily</span><span class="s4">(</span><span class="s2">'HarmonyHeiTi-Bold'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">lineHeight</span><span class="s4">(</span><span class="s7">33</span><span class="s4">)</span>
      <span class="s6">// Banner()</span>
      <span class="s0">Scroll</span><span class="s4">() </span><span class="s1">{</span>
        <span class="s0">Column</span><span class="s4">() </span><span class="s1">{</span>
          <span class="s0">Banner</span><span class="s4">()</span>
          <span class="s0">EnablementView</span><span class="s4">()</span>
          <span class="s0">TutorialView</span><span class="s4">()</span>
        <span class="s1">}</span>
      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">scrollBar</span><span class="s4">(</span><span class="s0">BarState</span><span class="s3">.</span><span class="s0">Off</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">align</span><span class="s4">(</span><span class="s0">Alignment</span><span class="s3">.</span><span class="s0">TopStart</span><span class="s4">)</span>

      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s2">'#F1F3F5'</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">expandSafeArea</span><span class="s4">([</span><span class="s0">SafeAreaType</span><span class="s3">.</span><span class="s0">SYSTEM</span><span class="s4">]</span><span class="s3">,</span><span class="s4">[</span><span class="s0">SafeAreaEdge</span><span class="s3">.</span><span class="s0">TOP</span><span class="s3">,</span><span class="s0">SafeAreaEdge</span><span class="s3">.</span><span class="s0">BOTTOM</span><span class="s4">])</span><span class="s6">//沉浸式</span>
    <span class="s1">}</span>
  <span class="s1">}</span>



<span class="s5">@</span><span class="s0">Preview</span>
<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct Banner</span><span class="s1">{</span>
  <span class="s6">//构造六个bannerclass实例，实现轮播图效果</span>
  <span class="s5">@</span><span class="s0">State bannerList</span><span class="s3">:</span><span class="s0">Array</span><span class="s3">&lt;</span><span class="s0">BannerClass</span><span class="s3">&gt;=</span><span class="s4">[</span>
    <span class="s0">new BannerClass</span><span class="s4">(</span><span class="s2">'pic0'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.banner_pic0'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new BannerClass</span><span class="s4">(</span><span class="s2">'pic1'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.banner_pic1'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new BannerClass</span><span class="s4">(</span><span class="s2">'pic2'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.banner_pic2'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/deveco-studio/'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new BannerClass</span><span class="s4">(</span><span class="s2">'pic3'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.banner_pic3'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/arkts/'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new BannerClass</span><span class="s4">(</span><span class="s2">'pic4'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.banner_pic4'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/arkui/'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new BannerClass</span><span class="s4">(</span><span class="s2">'pic5'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.banner_pic5'</span><span class="s4">)</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/sdk'</span><span class="s4">)</span>
  <span class="s4">]</span><span class="s3">;</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Swiper</span><span class="s4">()</span><span class="s1">{</span>
      <span class="s6">//使用ForEach循环渲染六张图片</span>
      <span class="s0">ForEach</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">bannerList</span><span class="s3">, </span><span class="s4">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">BannerClass</span><span class="s3">, </span><span class="s0">index</span><span class="s3">: </span><span class="s0">number</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s1">{</span>
        <span class="s0">Image</span><span class="s4">(</span><span class="s0">item</span><span class="s3">.</span><span class="s0">imageSrc</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">objectFit</span><span class="s4">(</span><span class="s0">ImageFit</span><span class="s3">.</span><span class="s0">Contain</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{</span><span class="s0">top</span><span class="s3">:</span><span class="s7">11</span><span class="s3">,</span><span class="s0">left</span><span class="s3">:</span><span class="s7">16</span><span class="s3">,</span><span class="s0">right</span><span class="s3">:</span><span class="s7">16</span><span class="s1">}</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
      <span class="s1">}</span><span class="s3">,</span><span class="s4">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">BannerClass</span><span class="s3">, </span><span class="s0">index</span><span class="s3">: </span><span class="s0">number</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s0">item</span><span class="s3">.</span><span class="s0">id</span><span class="s4">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">autoPlay</span><span class="s4">(</span><span class="s0">true</span><span class="s4">)</span><span class="s6">//控制是否自动轮播子组件</span>
    <span class="s3">.</span><span class="s0">loop</span><span class="s4">(</span><span class="s0">true</span><span class="s4">)</span><span class="s6">//控制是否循环播放</span>
    <span class="s3">.</span><span class="s0">indicator</span><span class="s4">( </span><span class="s6">//自定义导航点的位置和样式</span>
      <span class="s0">new DotIndicator</span><span class="s4">()</span>
        <span class="s3">.</span><span class="s0">color</span><span class="s4">(</span><span class="s2">'#1a000000'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">selectedColor</span><span class="s4">(</span><span class="s2">'#0A59F7'</span><span class="s4">))</span>
  <span class="s1">}</span>
<span class="s1">}</span>



<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">export struct TutorialItem </span><span class="s1">{</span>
  <span class="s5">@</span><span class="s0">Prop tutorialItem</span><span class="s3">: </span><span class="s0">ArticleClass</span><span class="s3">;</span>
  <span class="s6">// private title: string = 'Step1 快速入门介绍';</span>
  <span class="s6">// private brief: string = '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序 。';</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Row</span><span class="s4">() </span><span class="s1">{</span>
      <span class="s0">Column</span><span class="s4">() </span><span class="s1">{</span>
        <span class="s0">Text</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">tutorialItem</span><span class="s3">.</span><span class="s0">title</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">19</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">textOverflow</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">overflow</span><span class="s3">: </span><span class="s0">TextOverflow</span><span class="s3">.</span><span class="s0">Ellipsis </span><span class="s1">}</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">maxLines</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">400</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">4 </span><span class="s1">}</span><span class="s4">)</span>
        <span class="s0">Text</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">tutorialItem</span><span class="s3">.</span><span class="s0">brief</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">32</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">12</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">textOverflow</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">overflow</span><span class="s3">: </span><span class="s0">TextOverflow</span><span class="s3">.</span><span class="s0">Ellipsis </span><span class="s1">}</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">maxLines</span><span class="s4">(</span><span class="s7">2</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">400</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s2">'rgba(0, 0, 0, 0.6)'</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">5 </span><span class="s1">}</span><span class="s4">)</span>
      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">HorizontalAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">right</span><span class="s3">: </span><span class="s7">12 </span><span class="s1">}</span><span class="s4">)</span>

      <span class="s0">Image</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">tutorialItem</span><span class="s3">.</span><span class="s0">imageSrc</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">64</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">108</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">objectFit</span><span class="s4">(</span><span class="s0">ImageFit</span><span class="s3">.</span><span class="s0">Cover</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">88</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">White</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">12</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">VerticalAlign</span><span class="s3">.</span><span class="s0">Top</span><span class="s4">)</span>
  <span class="s1">}</span>
<span class="s1">}</span>


<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct EnablementItem</span><span class="s1">{</span>
  <span class="s5">@</span><span class="s0">Prop enablementItem</span><span class="s3">: </span><span class="s0">ArticleClass</span><span class="s3">;</span>
  <span class="s6">// private title: string ='HarmonyOS第一课';</span>
  <span class="s6">// private brief : string ='基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';</span>
  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s4">()</span><span class="s1">{ </span><span class="s6">//使用column组件作为这个视图的最外层容器</span>
      <span class="s0">Image</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">enablementItem</span><span class="s3">.</span><span class="s0">imageSrc</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">objectFit</span><span class="s4">(</span><span class="s0">ImageFit</span><span class="s3">.</span><span class="s0">Cover</span><span class="s4">)</span><span class="s6">//设置填充效果为cover模式，即保持宽高比进行缩小或者放大，使得图片两边都大于或者等于显示边界</span>
        <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">96</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s1">{</span><span class="s6">//对图片单独设置圆角以使之与父容器column圆角一致</span>
          <span class="s0">topLeft</span><span class="s3">: </span><span class="s7">16</span><span class="s3">,</span>
          <span class="s0">topRight</span><span class="s3">: </span><span class="s7">16</span>
        <span class="s1">}</span><span class="s4">)</span>
      <span class="s0">Text</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">enablementItem</span><span class="s3">.</span><span class="s0">title</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">19</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">textOverflow</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">overflow</span><span class="s3">: </span><span class="s0">TextOverflow</span><span class="s3">.</span><span class="s0">Ellipsis </span><span class="s1">}</span><span class="s4">)</span><span class="s6">//textOverFlow属性设置文本超长时的显示方式，设置它的值为Ellipsis，表示超长时使用省略号替代。</span>
        <span class="s3">.</span><span class="s0">maxLines</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">400</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">12</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s7">12 </span><span class="s1">}</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">8 </span><span class="s1">}</span><span class="s4">)</span>
      <span class="s0">Text</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">enablementItem</span><span class="s3">.</span><span class="s0">brief</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">32</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">12</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">textOverflow</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">overflow</span><span class="s3">: </span><span class="s0">TextOverflow</span><span class="s3">.</span><span class="s0">Ellipsis </span><span class="s1">}</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">maxLines</span><span class="s4">(</span><span class="s7">2</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">400</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s2">'rgba(0, 0, 0, 0.6)'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">12</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s7">12 </span><span class="s1">}</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">2 </span><span class="s1">}</span><span class="s4">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">160</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">169</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">White</span><span class="s4">)</span><span class="s6">//为整个组件添加白色背景</span>
  <span class="s1">}</span>
<span class="s1">}</span>

<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct EnablementView</span><span class="s1">{</span>
  <span class="s5">@</span><span class="s0">State enablementList</span><span class="s3">: </span><span class="s0">Array</span><span class="s3">&lt;</span><span class="s0">ArticleClass</span><span class="s3">&gt; = </span><span class="s4">[</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'1'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic1'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'HarmonyOS第一课'</span><span class="s3">,</span>
      <span class="s2">'基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/doc/harmonyos-video-courses/video-tutorials-0000001443535745'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'2'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic2'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'开发指南'</span><span class="s3">,</span>
      <span class="s2">'提供系统能力概述、快速入门，用于指导开发者进行场景化的开发。指南涉及到的知识点包括必要的背景知识、符合开发者实际开发场景的操作任务流（开发流程、开发步骤、调测验证）以及常见问题等。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide-0000001630265101'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'3'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic3'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'最佳实践'</span><span class="s3">,</span>
      <span class="s2">'针对新发布特性及热点特性提供详细的技术解析和开发最佳实践。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/topic-architecture-0000001678045510'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'4'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic4'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Codelabs'</span><span class="s3">,</span>
      <span class="s2">'以教学为目的的代码样例及详细的开发指导，帮助开发者一步步地完成指定场景的应用开发并掌握相关知识。Codelabs将最新的鸿蒙生态应用开发技术与典型场景结合，让开发者快速地掌握开发高质量应用的方法。同时支持互动式操作，通过文字、代码和效果联动为开发者带来更佳的学习体验。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/doc/harmonyos-codelabs/codelabs-0000001443855957'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'5'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic5'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Sample'</span><span class="s3">,</span>
      <span class="s2">'面向不同类型的开发者提供的鸿蒙生态应用开发优秀实践，每个Sample Code都是一个可运行的工程，为开发者提供实例化的代码参考。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/doc/harmonyos-samples/samples-0000001162414961'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'6'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic6'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'API参考'</span><span class="s3">,</span>
      <span class="s2">'面向开发者提供鸿蒙系统开放接口的全集，供开发者了解具体接口使用方法。API参考详细地描述了每个接口的功能、使用限制、参数名、参数类型、参数含义、取值范围、权限、注意事项、错误码及返回值等。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/doc/harmonyos-references/development-intro-0000001580026066'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'7'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic7'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'FAQ'</span><span class="s3">,</span>
      <span class="s2">'开发者常见问题的总结，开发者可以通过FAQ更高效地解决常见问题。FAQ会持续刷新，及时呈现最新的常见问题。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-development-0000001753952202'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'8'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.enablement_pic8'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'开发者论坛'</span><span class="s3">, </span><span class="s2">'和其他应用开发者交流技术、共同进步。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
  <span class="s4">]</span><span class="s3">;</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s4">() </span><span class="s1">{</span>
      <span class="s0">Text</span><span class="s4">(</span><span class="s2">'赋能套件'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s2">'#182431'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">500</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontFamily</span><span class="s4">(</span><span class="s2">'HarmonyHeiTi-medium'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">16 </span><span class="s1">}</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">bottom</span><span class="s3">: </span><span class="s7">8.5 </span><span class="s1">}</span><span class="s4">)</span>

      <span class="s0">Grid</span><span class="s4">() </span><span class="s1">{</span>

        <span class="s0">ForEach</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">enablementList</span><span class="s3">, </span><span class="s4">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">ArticleClass</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s1">{</span>
          <span class="s0">GridItem</span><span class="s4">() </span><span class="s1">{</span>
            <span class="s0">EnablementItem</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">enablementItem</span><span class="s3">: </span><span class="s0">item </span><span class="s1">}</span><span class="s4">)</span>
          <span class="s1">}</span>
        <span class="s1">}</span><span class="s3">, </span><span class="s4">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">ArticleClass</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s0">item</span><span class="s3">.</span><span class="s0">id</span><span class="s4">)</span>
      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">rowsTemplate</span><span class="s4">(</span><span class="s2">'1fr'</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">columnsGap</span><span class="s4">(</span><span class="s7">8</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">scrollBar</span><span class="s4">(</span><span class="s0">BarState</span><span class="s3">.</span><span class="s0">Off</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">169</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">2</span><span class="s3">, </span><span class="s0">left</span><span class="s3">: </span><span class="s7">16</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s7">16 </span><span class="s1">}</span><span class="s4">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">18 </span><span class="s1">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">HorizontalAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
  <span class="s1">}</span>
<span class="s1">}</span>

<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct TutorialView</span><span class="s1">{</span>
  <span class="s5">@</span><span class="s0">State tutorialList</span><span class="s3">: </span><span class="s0">Array</span><span class="s3">&lt;</span><span class="s0">ArticleClass</span><span class="s3">&gt; = </span><span class="s4">[</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'1'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic1'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step1 环境的搭建'</span><span class="s3">,</span>
      <span class="s2">'本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'2'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic2'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step2 使用Swiper构建运营广告位'</span><span class="s3">,</span>
      <span class="s2">'Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'3'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic3'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step3 创建和组合视图'</span><span class="s3">,</span>
      <span class="s2">'Item定义子组件相关特征。相关组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'4'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic4'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step4 网格和列表组建的使用'</span><span class="s3">,</span>
      <span class="s2">'网格和列表组件中，当Item达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能，适合用于呈现同类数据类型或数据类型集'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'5'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic5'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step5 应用架构设计基础——MVVM模式'</span><span class="s3">,</span>
      <span class="s2">'ArkUI采取MVVM = Model + View + ViewModel模式，将数据与视图绑定在一起，更新数据的时候直接更新视图。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'6'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic6'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step6 应用架构设计基础——三层架构'</span><span class="s3">,</span>
      <span class="s2">'为了更好地适配复杂应用的开发，建议采用三层架构的方式对整个应用的功能进行模块化，实现高内聚、低耦合开发。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'7'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic7'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step7 ArkWeb页面适配'</span><span class="s3">,</span>
      <span class="s2">'ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'8'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic8'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step8 数据驱动UI更新'</span><span class="s3">, </span><span class="s2">'数据更新的同时会直接驱动UI的改变'</span><span class="s3">,</span>
      <span class="s2">'xxx'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'9'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic9'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step9 设置组件导航'</span><span class="s3">,</span>
      <span class="s2">'Navigation组件适用于模块内页面切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'10'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic10'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step10 原生智能：AI语音朗读'</span><span class="s3">,</span>
      <span class="s2">'文本转语音服务提供将文本信息转换为语音并进行播报的能力，便于用户与设备进行互动，实现实时语音交互，文本播报。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'11'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic11'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step11 分布式流转'</span><span class="s3">,</span>
      <span class="s2">'流转能力打破设备界限，多设备联动，使用户应用程序可分可合、可流转，实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
    <span class="s0">new ArticleClass</span><span class="s4">(</span><span class="s2">'12'</span><span class="s3">, </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.tutorial_pic12'</span><span class="s4">)</span><span class="s3">, </span><span class="s2">'Step12 一次开发，多端部署'</span><span class="s3">,</span>
      <span class="s2">'一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。'</span><span class="s3">,</span>
      <span class="s2">'https://developer.huawei.com/consumer/cn/forum/home?all=1'</span><span class="s4">)</span><span class="s3">,</span>
  <span class="s4">]</span><span class="s3">;</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s4">() </span><span class="s1">{</span>
      <span class="s0">Text</span><span class="s4">(</span><span class="s2">'入门教程'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s2">'#182431'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">16</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s7">500</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontFamily</span><span class="s4">(</span><span class="s2">'HarmonyHeiTi-medium'</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">textAlign</span><span class="s4">(</span><span class="s0">TextAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">16 </span><span class="s1">}</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">bottom</span><span class="s3">: </span><span class="s7">8.5 </span><span class="s1">}</span><span class="s4">)</span>

      <span class="s0">List</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s7">12 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
        <span class="s0">ForEach</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">tutorialList</span><span class="s3">, </span><span class="s4">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">ArticleClass</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s1">{</span>
          <span class="s0">ListItem</span><span class="s4">() </span><span class="s1">{</span>
            <span class="s0">TutorialItem</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">tutorialItem</span><span class="s3">: </span><span class="s0">item </span><span class="s1">}</span><span class="s4">)</span>
          <span class="s1">}</span>
        <span class="s1">}</span><span class="s3">, </span><span class="s4">(</span><span class="s0">item</span><span class="s3">: </span><span class="s0">ArticleClass</span><span class="s4">) </span><span class="s3">=&gt; </span><span class="s0">item</span><span class="s3">.</span><span class="s0">id</span><span class="s4">)</span>

      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">scrollBar</span><span class="s4">(</span><span class="s0">BarState</span><span class="s3">.</span><span class="s0">Off</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">16</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s7">16 </span><span class="s1">}</span><span class="s4">)</span>

    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">18 </span><span class="s1">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">HorizontalAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>

  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>